<template>
  <a-modal
    :visible="visible"
    :title="visibleTitle"
    centered
    :maskClosable="false"
    :confirm-loading="visibleLoading"
    :width="560"
    @cancel="visible = false"
    @ok="handleBatchVerifySubmit"
  >
    <a-tabs :active-key="currentTab" @change="handlerChangeTab">
      <a-tab-pane
        :key="item.key"
        :tab="item.title"
        v-for="item in verifyColumns"
      >
        <custom-form
          ref="custom-form"
          class="custom-form review-form"
          v-model="currentRow"
          :FormList="item.children"
          mode="add"
          v-bind="formItemLayout"
          layout="horizontal"
        >
          <template slot="big_mb_ck1" slot-scope="{ params, column }">
            <a-input v-model="params.big_mb_ck1" v-bind="column.form">
              <!-- <a-icon slot="addonAfter" type="setting" /> -->
              <span
                slot="addonAfter"
                style="cursor: pointer"
                @click="handlerCheck(params)"
                >核查计算</span
              >
            </a-input>
          </template>
        </custom-form>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script lang="ts">
import { Mixins, Component, Watch, Vue, Prop } from 'vue-property-decorator'
import EventsMixin from '@/mixin/events'
import { TableMixin, AuthMixin } from '@/mixin'
import CustomForm from '@/components/src/Form'
import { reviewDict } from '@/common/enum'
import { largeMemberServices } from '@/common/services/largeMember'
import { merge } from 'lodash-es'
import { userModule } from '@/store/modules/user'

@Component({
  components: {
    CustomForm,
  },
})
export default class AdminList extends Mixins(
  EventsMixin,
  TableMixin,
  AuthMixin
) {
  get currentUserAreaId() {
    return userModule.currentUserArea.s_a_id
  }
  get verifyColumns() {
    const columns = [
      {
        title: '区县核定',
        key: 'key0',
        children: [
          {
            title: '核定补贴面积(亩)',
            width: 130,
            dataIndex: 'big_mb_ck',
            key: 'big_mb_ck',
            align: 'right',
            form: {
              type: 'a-input',
              placeholder: '以补贴参照面积为准',
              disabled: true,
              len: 6,
            },
          },
          {
            title: '负责人',
            dataIndex: 'big_mb_ck_u',
            key: 'big_mb_ck_u',
            width: 80,
            form: {
              type: 'a-input',
              placeholder: '未填写时，清空审核面积',
              len: 6,
            },
          },
          {
            title: '核定日期',
            dataIndex: 'big_mb_time',
            key: 'big_mb_time',
            width: 90,
            form: {
              type: 'a-date-picker',
              placeholder: '请选择区县核定日期',
              // showTime: { format: 'HH:mm' },
              format: 'YYYY-MM-DD',
              valueFormat: 'YYYY-MM-DD',
              len: 6,
            },
          },
        ],
      },

      {
        title: '乡镇核查',
        key: 'key1',
        children: [
          {
            title: '核查面积（亩）',
            // scopedSlots: { customRender: 'big_mb_ck1' },
            dataIndex: 'big_mb_ck1',
            width: 120,
            key: 'big_mb_ck1',
            align: 'right',
            form: {
              type: 'a-input',
              placeholder: '以补贴参照面积为准',
              disabled: true,
              len: 9,
              // dict: reviewDict
            },
          },
          {
            title: '负责人',
            dataIndex: 'big_mb_ck_u1',
            key: 'big_mb_ck_u1',
            width: 80,
            form: {
              type: 'a-input',
              placeholder: '未填写时，清空审核面积',
              len: 9,
            },
          },
          {
            title: '审核日期',
            dataIndex: 'big_mb_time1',
            key: 'big_mb_time1',
            width: 90,
            form: {
              type: 'a-date-picker',
              placeholder: '请选择乡镇审核日期',
              // showTime: { format: 'HH:mm' },
              format: 'YYYY-MM-DD',
              valueFormat: 'YYYY-MM-DD',
              len: 9,
            },
          },
        ],
      },

      {
        title: '驻村干部审核',
        key: 'key3',
        children: [
          {
            title: '审核意见',
            scopedSlots: { customRender: 'big_mb_ck3' },
            key: 'big_mb_ck3',
            width: 80,
            form: {
              type: 'a-radio-group',
              placeholder: '请选择驻村干部审核意见',
              dict: reviewDict,
              len: 12,
            },
          },
          {
            title: '审核人',
            dataIndex: 'big_mb_ck_u3',
            key: 'big_mb_ck_u3',
            width: 80,
            form: {
              type: 'a-input',
              placeholder: '请输入驻村干部审核人姓名',
              len: 12,
            },
          },
          {
            title: '审核日期',
            dataIndex: 'big_mb_time3',
            key: 'big_mb_time3',
            width: 90,
            form: {
              type: 'a-date-picker',
              placeholder: '请选择乡镇审核日期',
              // showTime: { format: 'HH:mm' },
              format: 'YYYY-MM-DD',
              valueFormat: 'YYYY-MM-DD',
              len: 12,
            },
          },
        ],
      },

      {
        title: '村委审核',
        key: 'key2',
        children: [
          {
            title: '审核意见',
            scopedSlots: { customRender: 'big_mb_ck2' },
            key: 'big_mb_ck2',
            width: 80,
            form: {
              type: 'a-radio-group',
              placeholder: '请选择村委审核意见',
              dict: reviewDict,
              len: 12,
            },
          },
          {
            title: '审核人',
            dataIndex: 'big_mb_ck_u2',
            key: 'big_mb_ck_u2',
            width: 80,
            form: {
              type: 'a-input',
              placeholder: '请输入村委审核人姓名',
              len: 12,
            },
          },
          {
            title: '审核日期',
            dataIndex: 'big_mb_time2',
            key: 'big_mb_time2',
            width: 90,
            form: {
              type: 'a-date-picker',
              placeholder: '请选择乡镇审核日期',
              // showTime: { format: 'HH:mm' },
              format: 'YYYY-MM-DD',
              valueFormat: 'YYYY-MM-DD',
              len: 12,
            },
          },
        ],
      },

      // {
      //   title: '申报日期',
      //   dataIndex: 'apl_time',
      //   key: 'apl_time',
      //   width: 90,
      //   form: {
      //     type: 'a-date-picker',
      //     placeholder: '请选择申请日期',
      //     format: 'YYYY-MM-DD',
      //     valueFormat: 'YYYY-MM-DD',
      //   },
      // },
    ]
    return columns
      .map((column) => {
        if (!column.children) return column
        // @ts-ignore
        column.children = column.children.filter((item) => (item?.form?.len || 0) >= this.currentUserAreaId.length
        )
        // column.children = column.children.map(item => {
        //   const disabled = (item?.form?.len || 0) < this.currentUserAreaId.length
        //   return merge(item, {
        //     form: {
        //       // @ts-ignore
        //       disabled: typeof item.form.disabled === 'undefined' ? disabled : item.form.disabled
        //     }
        //   })
        // })
        if (!column.children.length) return false
        return column
      })
      .filter(Boolean)
  }

  public mounted() {}

  public formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 17 },
  }

  public currentAreaId = ''
  public currentTab = ''

  public show(currentAreaId: string) {
    this.visible = true
    this.currentAreaId = currentAreaId
    this.columns = this.verifyColumns
    this.currentTab = this.verifyColumns[0] ? this.verifyColumns[0].key : ''
    console.log(this.currentTab)
    this.visibleTitle = '批量填写审核审批意见'
  }

  public handlerChangeTab(e: string) {
    this.currentTab = e
  }
  public handleBatchVerifySubmit() {
    this.visibleLoading = true
    const index = this.currentTab.replace('key', '')
    for (let key in this.currentRow) {
      // big_mb_ck_u
      if (
        key.startsWith('big_mb_') &&
        (+index ? !key.endsWith(index) : key.replace(/[0-9]$/g, '') !== key)
      ) {
        delete this.currentRow[key]
      }
    }

    largeMemberServices
      .BatchVerify({
        s_a_id: this.currentAreaId,
        ...this.currentRow,
        type: +this.currentTab.replace('key', '') + 1,
      })
      .then((_) => {
        this.$message.success('操作成功')
        this.visible = false
        this.$emit('batch-verify-success')
      })
      .finally(() => {
        this.visibleLoading = false
      })
  }
}
</script>

<style scoped lang="less">
// 审核表专用样式
/deep/ .review-form {
  padding-top: 20px;
  // .ant-form-item {
  //   &:nth-child(0), &:nth-child(3), &:nth-child(6), &:nth-child(9) {
  //     &::after {
  //       clear: both;
  //       display: table;
  //       content: '';
  //       width: 100%;
  //       height: 1px;
  //       border-bottom: 1px dashed #999;
  //       padding: 10px 0;
  //     }
  //   }

  //   &:nth-child(1), &:nth-child(4), &:nth-child(7), &:nth-child(10) {
  //     position: relative;
  //     &::before {
  //       position: absolute;
  //       top: -32px;
  //       left: 0;
  //       height: 30px;
  //       line-height: 30px;
  //       padding-right: 20px;
  //       font-size: 14px;
  //       font-weight: bold;
  //       background-color: #fff;
  //     }
  //   }

  // &:nth-child(1) {
  //   &::before {
  //     content: '区县核定意见'
  //   }
  // }

  // &:nth-child(4) {
  //   &::before {
  //     content: '乡镇核查意见'
  //   }
  // }
  // &:nth-child(7) {
  //   &::before {
  //     content: '驻村负责人审核意见'
  //   }
  // }

  // &:nth-child(10) {
  //   &::before {
  //     content: '村委负责人审核意见'
  //   }
  // }
  // }
}
</style>
